<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页</title>
    <script src="js/commen.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
    <!-- 注册页 -->
    <section id="register">
        <!-- 头部导航 -->
        <header class="top-nav">
            <a href="myinfo.html" class="top-nav1"><i></i></a>
            <p class="top-nav2">注册</p>
            <a href="login.html" class="top-nav3">登录</a>
        </header>
        <!-- 注册详情 -->
        <section class="register-details">
            <form action="" method="post">
                <!-- 地区 -->
                <div class="regin">
                    <label>国家/地区</label>
                    <input name="name" type="text" placeholder="中国大陆86">
                </div>
                <!-- 手机号 -->
                <div class="register-sj">
                    <label>手机号码</label>
                    <input name="name" type="tell" placeholder="常用手机号">
                    <span><a href="javascript:void(0)"  class="remove"></a></span>
                </div>
                <!-- 验证码 -->
                <div class="register-code">
                    <label>验证码</label>
                    <input name="name" type="text" placeholder="短信验证码">
                    <div class="box">
                        <a href="javascript:void(0)" class="btn time">获取验证码</a>
                        <!-- 重新发送和时间 -->
                        <a href="javascript:void(0)" class="btn"><span class="num">60</span>s</a>
                        <a href="javascript:void(0)" class="btn">重新发送</a>
                    </div>

                </div>
                <!-- 设置密码 -->
                <div class="register-password">
                    <label>密码</label>
                    <input name="password" type="password" placeholder="6~12位大小写字母·数字" class="psd">
                    <span>
                        <a href="javascript:void(0)" class="remove"></a>
                        <a href="javascript:void(0)"></a>
                    </span>
                </div>
                <!-- 注册 -->
                <div class="register-bar">
                    <button class="btn">注册</button>
                </div>
            </form>



        </section>
    </section>

</body>
<script src="js/zepto.js"></script>
<script src="js/touch.min.js"></script>
<script>
      var event = "onclick" in window ? "click" : "tap";
    $(".btn").eq(0).on(event, function () {
        $(this).removeClass("time").next().addClass("time");
         countDown();    
 })
    $(".btn").eq(2).on(event, function () {
        $(this).removeClass("time").prev().addClass("time");
        countDown();
    })
    $(".remove").on(event,function(){
        $(this).parent().prev().val("");
    });
 function countDown(){
     var num = 60;
     $(".btn .num").text(num);
      var timer = setInterval(function () {
         if (num == 0) {
             $(".btn").eq(1).removeClass("time").next().addClass("time");
             clearInterval(timer);
         }
         num--;
         $(".num").html(num);
     }, 1000)
 }
  let ispaw = true;
 $(".register-password a:nth-of-type(2)").on(event,function(){
       if (ispaw) {
         $(".psd").attr("type", "text");
         ispaw = false;
     } else {
         $(".psd").attr("type", "password");
         ispaw = true;
     }
 })
</script>

</html>